Day8影音多媒體

2023 iThome 鐵人賽

DAY 8

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 8 篇

15th鐵人賽

jenny

2023-09-23 22:57:22

319 瀏覽

分享至

1.<video>影音標籤:
(1)src="url" :影音位置
(2)poster="url" :檔案播放的預覽圖片
(3)preload="{none,metadata,auto}": 點選網頁時，是否載入影片
(4)autoplay: 自動撥放
(5)loop: 結束後是否重複撥放
(6)muted: 預設影片是否靜音
(7)controls: 是否有影片的控制面板
(8)width="n"
(9)height="n"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>video</title>
    </head> 
    <body>
        <!--影片開始前畫面是OIP.jpg-->
        <video width="500" controls poster="OIP.jpg">
            <source src="IMG_1640.mp4" type="video/mp4">

        </video>
    </body>
</html>

2.<audio>聲音標籤:
(1)src="url" 聲音位置
(2)preload="{none,metadata,auto}" 點選網頁時，是否載入聲音
(3)autoplay: 自動撥放
(4)loop: 結束後是否重複撥放
(5)muted: 預設影片是否靜音
(6)controls: 是否有影片的控制面板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>audio</title>
    </head> 
    <body>
        
        <audio controls >
            <source src="audio.m4a" type="audio/m4a">

        <audio>
    </body>
</html>

<embed>嵌入資源檔案標籤：
<embed>標籤用於將外部多媒體內容（如音頻、視頻、Flash 動畫等）嵌入到網頁中。
這個標籤提供了一種簡單的方式來嵌入多媒體。
屬性說明：
(1)src：指定要嵌入的多媒體文件的 URL。這可以是音訊、視頻或其他多媒體格式的連結。
(2)type：指定嵌入的內容類型。
(3)width 和 height：指定嵌入內容的寬度和高度，以像素為單位。

4.<object>物件標籤:
用於將外部多媒體或其他類型的內容嵌入到網頁中。
它提供了一種通用的方法來嵌入各種類型的內容，包括圖像、視頻、音訊、互動式媒體和其他多媒體檔案。
屬性:
(1)data：指定要嵌入的外部資源的URL。這是 <object> 最重要的屬性，它告訴瀏覽器要載入和顯示的內容是什麼。
(2)width 和 height：指定嵌入內容的寬度和高度，以像素為單位。
(3)type：指定嵌入的內容類型。

5.腳本標籤（<script> 標籤）是用於在 HTML 文件中嵌入 JavaScript 代碼的標籤。

<!DOCTYPE html>
<html>
<head>
    <title>Script</title>
</head>
<body>

<h1>Hello, World!</h1>

<script>
    // 在這裡編寫 JavaScript 代碼
    alert('這是一個 JavaScript 提示框！');
</script>

</body>
</html>

6.內嵌框架標籤:
<iframe> 標籤是 HTML 中用來嵌入另一個網頁或多媒體內容的元素。
它可以用來在網頁中嵌入其他網頁、地圖、視頻、音頻等。
(1)src="url":指定要嵌入的內容的來源。
(2)name=" ":iframe的名稱。
(3)frameborder=" ":設定框線。
(4)sandbox 屬性:來增強 <iframe> 的安全性，它可以限制 iframe 中內容的行為，例如禁止表單提交、禁止腳本執行等。

也可以在<iframe>中嵌入其他多媒體，例如影片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>iframe</title>
    </head>
    <body>
        <iframe src="https://www.youtube.com/watch?v=xL0ch83RAK8" width="300" height="315"></iframe>

    </body>
</html>